<template>
    <div class="storage-status-wrap">
        <div class="common-title">仓位状态</div>
        <div class="info-box flex-hor-layout">
            <div class="item">
                <div class="val">{{totalHoldings | fck(-8, 2)}}</div>
                <el-tooltip effect="dark" content="该合约所有用户的持仓总额" placement="bottom">
                    <div class="title underline pointer">总持仓额(USDT)</div>
                </el-tooltip>
            </div>
            <div class="item">
                <div class="val">{{oli | fck(-8, 2)}}</div>
                <el-tooltip effect="dark" placement="bottom">
                    <div slot="content" style="text-align: center;">
                        裸头寸额=多头头寸额与空头<br/>头寸额差值的绝对值
                    </div>
                    <div class="title underline pointer">裸头寸额(USDT)</div>
                </el-tooltip>
            </div>
            <div class="item">
                <div class="val">{{user.totalMargin | fck(-8, 2)}}</div>
                <div class="title underline pointer">总持仓保证金(USDT)</div>
            </div>
        </div>

        <div class="ratio flex-hor-layout">
            <div class="line green" :style="green"></div>
            <div class="line red" :style="red"></div>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    name: 'StorageStatus',
    components: {
    },
    data() {
        return {
            flexTpl: 'flex-grow:',
            green: 'flex-grow:5;',
            red: 'flex-grow:5;'
        }
    },
    computed: {
      ...mapGetters([
        'addr',
        'board',
        'account',
        'curPrice',
        'user'
      ]),
    },
    watch: {
      'account': function (newVal) {
        // console.log('storageStatus.vue==>>watch.board, board:%o', newVal)
        // this.$filter.
        let long = parseInt(newVal.long.size)
        let short = parseInt(newVal.short.size)
        if(long === 0 && short === 0){
            long = 1
            short = 1
        }
        this.green = `${this.flexTpl}${long};`
        this.red = `${this.flexTpl}${short};`
        // console.log('storageStatus.vue==>>watch.board, gree: %o, red: %o', this.green, this.red)
      }
    },
    created() {
        // console.log('storageStatus.vue==>>created, board: %o', this.board)
    },
    methods:{
    }
}
</script>
<style lang="scss" scoped>
@import "./storageStatus.scss";
</style>
